<script setup>
import {reactive, ref} from "vue";


const tableData = reactive([
  {date: '2025-3-22', name: '泳永远像水一样', address: '四川成都'},
  {date: '2025-3-22', name: '源原来像水一样', address: '青茅山'},
  {
    date: '2025-3-22', name: '泳永远像水一样', address: '四川成都'
  },
  {date: '2025-3-22', name: '源原来像水一样', address: '青茅山'},
  {
    date: '2025-3-22', name: '泳永远像水一样', address: '四川成都'
  },
  {date: '2025-3-22', name: '源原来像水一样', address: '青茅山'},
  {
    date: '2025-3-22', name: '泳永远像水一样', address: '四川成都'
  },
  {date: '2025-3-22', name: '源原来像水一样', address: '青茅山'}, {
    date: '2025-3-22',
    name: '源原来像水一样',
    address: '青茅山'
  },
  {
    date: '2025-3-22', name: '泳永远像水一样', address: '四川成都'
  },


])
const page = reactive({
  current_page: 1,
  size: 5,

})
const page_size = ref(['5', '10', '15'])

const data = reactive({
  dialogVisible:false,
  row: null
})
const edit = (row) =>{
  data.row = row
  data.dialogVisible = true

}

</script>

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180"/>
    <el-table-column prop="name" label="Name" width="180"/>
    <el-table-column prop="address" label="Address"/>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button Circle type="primary" @click="edit(scope.row)">
          <el-icon><Edit /></el-icon>
        </el-button>
      </template>

    </el-table-column>

  </el-table>
  <div style="padding: 10px 0">
    <el-pagination
        v-model:current-page="page.current_page"
        v-model:page-size="page.size"
        :page-size="page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total=tableData.length
    ></el-pagination>
  </div>
  <el-dialog v-model="data.dialogVisible" title="编辑行对象" width="500" >
    <div style="padding: 20px">
      <div style="margin-botton:10px">日期：{{data.row.date}}</div>
      <div style="margin-botton:10px">名称：{{data.row.name}}</div>
      <div>地址：{{data.row.address}}</div>
    </div>
  </el-dialog>
</template>
